<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XXXX</title>
    <style>
        body{ height: 2000px;}
    </style>
</head>
<body>
    <button>按钮</button>
    <script>
        // 1、滚动的触发情况
        // window.onscroll = function(){
        //     console.log('浏览器滚动了')
        // }
        // 2、页面上的特殊元素获取 特殊元素就是页面上标签 独一无二
        // console.log(document.body);
        // console.log(document.head);
        // console.log(document.title);
        // console.log(document.documentElement);//整个html标签的dom对象

        // 3、获取滚动距离
        window.onscroll = function(){
            // 获取到滚动距离 scrollTop/scrollLeft获取
            // console.log('根据body标签取出滚动距离',document.body.scrollTop) ;
            // console.log('根据documentElement取出滚动距离',document.documentElement.scrollTop) ;
            // 如果页面上存在<!DOCTYPE html> 声明 就需要使用 documentElement获取滚动距离 否则 就是body元素获取
            // 兼容性写法 document.documentElement.scrollTop 如果取出来 整个表达式 可以得到为真 所以不在执行表达式 直接将结果赋值给top变量 否则 继续向后执行
            var top = document.documentElement.scrollTop || document.body.scrollTop; 
            console.log(top);
        }
        // 4、修改滚动距离
        document.querySelector('button').onclick = function(){
            document.documentElement.scrollTop = 300;
        }

    </script>
</body>
</html>